<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入id" id="userid">
<input type="button" value="查询" id="btnSearch">
<div id="result">

</div>

<!--引入外部的js文件-->
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>

<script>

    $(document).ready(function () {
        //事件
        $("#btnSearch").click(function () {
            // $.ajax({
            //     url: "userinfo/"+$("#userid").val(),
            //     type: "get",
            //     success: function (res) {
            //         console.log(res)
            //         //后续再调整这个文字内容在页面上显示
            //         // 使用jquery的这个Ajax方法后，后端返回结果自动转换为 javaScript .中对象
            //         //无需再使用JSON.parse的方法
            //         let user = res;
            //         //
            //         document.getElementById("result").innerHTML = user.username;
            //     }
            // })

            $.get("userinfo/"+$("#userid").val(),function(res){
               $("#result").html(res.username);
            });
        });
    });


</script>
</body>
</html>